<template>
  <el-select
    v-model="cityCode"
    clearable
    placeholder="请选择参照城市"
    size="mini"
    @change="handleSelectCity"
  >
    <el-option
      v-for="item in referCitiesOptions"
      :disabled="disableOption(item)"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script>
import { mapState } from 'vuex';
export default {
  props: {
    value: {
      type: String | Number,
      default: ''
    },
  },
  data () {
    return {
      cityCode: ''
    }
  },
  computed: {
    ...mapState('commonComps/referCitiesUpdate', [
      'referCitiesOptions', // 参照城市下拉列表
      'checkedSupplyCityCodes', // 选中的供货城市code集合
    ]),
  },
  watch: {
    value: {
      handler (newVal) {
        this.cityCode = newVal
      },
      immediate: true
    }
  },
  methods: {
    // 选择参照城市
    handleSelectCity () {
      const cityInfo = this.referCitiesOptions.find(item => item.value == this.cityCode)
      this.$emit('getCityName', cityInfo?.label)
      this.$emit('getCityInfo', { templateCityName: cityInfo?.label, templateCityUuid: cityInfo?.value })
      this.$emit('update:value', this.cityCode)
    },
    // 禁用下拉选项
    disableOption (cityInfo) {
      const isSupply = this.checkedSupplyCityCodes.includes(cityInfo.value)
      return !isSupply // 当前参照城市不供货就禁用选项
    },
  }
}
</script>
